<template>
  <div class="app-container">
    <!--搜索条件-->
    <div ref="top" class="filter-container">
      <el-row :gutter="13" type="flex">
        <el-col :span="2">
          <el-select v-model="listQuery.orderState" placeholder="订单状态">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.orderSource" placeholder="订单来源">
            <el-option
              v-for="item in orderSourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.storeId" placeholder="选择门店">
            <el-option
              v-for="item in storeIdList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            />
          </el-select>
        </el-col>
        <el-col :span="5.5">
          <el-date-picker
            v-model="listQuery.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-col>

        <!-- @blur="searchSku" -->
        <el-col :span="4">
          <el-input v-model="listQuery.keyword" placeholder="sku/业务单号查询"/>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="searchFrom">查询</el-button>
        </el-col>

        <el-col :span="1" >
          <el-button type="primary" @click="download">下载</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- v-loading="listLoading" -->
    <el-table
      v-loading="listLoading"
      :data="listData"
      height="450"
      stripe
      border
      highlight-current-row
    >
      <el-table-column prop="mallOrderNumber" label="订单号" min-width="150"/>
      <el-table-column prop="orderState" label="订单状态" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.orderState | orderStatusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderSource" label="订单来源" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.orderSource | orderSourceFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryMode" label="提货方式" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.deliveryMode | deliveryModeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="classification" label="分类" min-width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.classification | classificationFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="品类" min-width="60"/>
      <el-table-column prop="brandName" label="品牌" min-width="130"/>
      <el-table-column prop="skuCode" label="SKU编码" min-width="120"/>
      <el-table-column prop="skuName" label="SKU名称" min-width="350"/>

      <el-table-column prop="amount" label="数量" min-width="60"/>
      <el-table-column prop="price" label="销售单价" min-width="80"/>

      <el-table-column prop="payPrice" label="实销单价" min-width="80">
        <template slot-scope="scope">
          <span >{{ scope.row.payPrice/scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payPrice" label="实销小计" min-width="80"/>

      <el-table-column prop="payPrice" label="优惠金额" min-width="80">
        <template slot-scope="scope">
          <span >{{ scope.row.price*scope.row.amount-scope.row.payPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="otherRemark" label="业务单号" min-width="100"/>

      <el-table-column prop="delivery" label="发货方式" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.delivery=='1'">供应商代发</span>
          <span v-if="scope.row.delivery=='2'">仓库自发</span>
        </template>
      </el-table-column>
      <el-table-column prop="warehouseName" label="发货仓" min-width="100"/>
      <el-table-column prop="userName" label="收货人" min-width="100"/>
      <el-table-column prop="address" label="收货地址" min-width="380"/>
      <el-table-column prop="expressCompany" label="物流公司" min-width="100"/>
      <el-table-column prop="expressNumber" label="物流单号" min-width="200"/>
      <el-table-column prop="state" label="发货状态" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.state | stateFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款时间" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.receivablesTime === null || scope.row.receivablesTime === ''"/>
          <span v-if="scope.row.receivablesTime !== null && scope.row.receivablesTime !== ''">{{ scope.row.receivablesTime |parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderRemark" label="备注" min-width="200"/>

    </el-table>

    <!--分页-->
    <div ref="bottom" class="pt-30">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[30,50,100,500,1000]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { initModuleHeight } from '@/api/utils'
import { queryAllStore, orderDetailList, download } from '@/api/pas/shop'
export default {
  filters: {
    orderStatusFilter(status) {
      const statusMap = {
        WAIT: '待审批',
        ALREADY: '已审批',
        CANCEL: '已取消'
      }
      return statusMap[status]
    },
    orderSourceFilter(status) {
      const statusMap = {
        1: '商城',
        2: '门店',
        3: '小程序',
        4: '后台',
        5: '网批',
        6: '采销'
      }
      return statusMap[status]
    },
    deliveryModeFilter(status) {
      const statusMap = {
        1: '门店提货',
        2: '快递'
      }
      return statusMap[status]
    },
    classificationFilter(status) {
      const statusMap = {
        1: '整机',
        2: '工具',
        3: '辅材',
        4: '赠品'
      }
      return statusMap[status]
    },
    stateFilter(status) {
      const statusMap = {
        1: '待发货',
        2: '出发中',
        3: '已发货',
        4: '已取消'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      listLoading: true,
      orderStatusList: [
        { value: 'WAIT', label: '待审批' },
        { value: 'ALREADY', label: '已审批' },
        { value: 'CANCEL', label: '已取消' },
        { value: '', label: '全部' }
      ],
      // 1、商城  2、门店 3、小程序  4.手动 5.网批 6.采销'
      orderSourceList: [
        { value: '1', label: '商城' },
        { value: '2', label: '门店' },
        { value: '3', label: '小程序' },
        { value: '4', label: '后台' },
        { value: '5', label: '网批' },
        { value: '6', label: '采销' },
        { value: '', label: '全部' }
      ],
      storeIdList: [],
      listQuery: {
        page: 1,
        pageSize: 30,
        keyword: null,
        storeId: '',
        orderSource: '',
        orderState: '',
        startTime: null,
        endTime: null,
        offset: 0,
        count: 20,
        time: ''
      },
      listData: [],
      total: 0,
      clientHeight: null,
      module: {
        top: {
          size: 0.1,
          height: 0
        },
        center: {
          size: 0.6,
          height: 0
        },
        bottom: {
          size: 0.2,
          height: 0
        }
      }

    }
  },
  watch: {
    clientHeight: function() {
      this.module = initModuleHeight(this.clientHeight, this.module)
      this.resizePageHeight(this.module)
    }
  },
  created() {
    const that = this
    that.getStoreList()
    that.getList()
  },
  mounted() {
    const that = this
    that.clientHeight = `${document.documentElement.clientHeight}`
    window.onresize = () => {
      return (() => {
        that.clientHeight = `${document.documentElement.clientHeight}`
      })()
    }
  },
  methods: {
    // 重置页面高度
    resizePageHeight(module) {
      const self = this
      const top = self.$refs.top
      const bottom = self.$refs.bottom
      top.style.height = module.top.height + 'px'
      bottom.style.height = module.bottom.height + 'px'
      self.module.center.height = module.center.height
    },
    // 下载
    download: function() {
      download(this.listQuery)
        .then(response => {
          const date = new Date()
          const filefix =
            date.getFullYear() +
            '-' +
            date.getMonth() +
            '-' +
            date.getDate() +
            ' ' +
            date.getHours() +
            ':' +
            date.getMinutes() +
            ':' +
            date.getSeconds()
          const blob = new Blob([response.data], {
            type: 'text/csvchartset=utf-8' // 将会被放入到blob中的数组内容的MIME类型
          }) // 创建一个blob对象
          const a = document.createElement('a') // 创建一个<a></a>标签
          a.href = URL.createObjectURL(blob) // response is a blob
          a.download = filefix + '订单明细.csv' // 文件名称
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          a.remove()
          return response
        })
        .catch(error => {
          console.log(error)
        })
    },

    // 搜索
    searchFrom() {
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.startTime = parseTime(
          this.listQuery.time[0],
          '{y}-{m}-{d} {h}: {i}'
        )
        this.listQuery.endTime = parseTime(
          this.listQuery.time[1],
          '{y}-{m}-{d} {h}: {i}'
        )
      } else {
        this.listQuery.startTime = null
        this.listQuery.endTime = null
      }
      this.listQuery.page = 1
      this.getList()
    },

    getList() {
      this.listQuery.offset = (this.listQuery.page - 1) * this.listQuery.pageSize
      this.listQuery.count = this.listQuery.pageSize
      this.listLoading = true
      orderDetailList(this.listQuery).then(res => {
        console.warn(res)
        if (res.data.data) {
          this.listLoading = false
          this.listData = res.data.data.mallOrderItemList
          this.total = res.data.data.mallOrderItemCount
          this.module.center.height = this.module.center.height - 40
        }
      })
    },

    getStoreList() {
      var queryPare = { offset: 0, count: 100 }
      queryAllStore(queryPare).then(res => {
        console.warn(res)
        if (res.data.data) {
          this.storeIdList = res.data.data.list
          var obj = {
            'storeName': '全部',
            'storeId': ''
          }
          this.storeIdList.push(obj)
        }
      })
    },

    // 分页
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.listQuery.page = 1
      this.getList()
    },

    // 分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }

  }
}

</script>
<style>
   body{
     background-color: #ffffff;
   }
    /*表格头部颜色*/
  .el-table__header thead  tr th{
      background-color: #edf4f9;
  }
  /*表格字体*/
  .el-table tr {
      font-size: 12px;
  }
  /*表格行高*/
  .el-table .cell{
    line-height: 1.2;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
     background-color: #D7FFD7 !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D7FFD7;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

</style>
